<template>
  <div class="min-h-screen bg-gray-50">


    <!-- 页面头部 -->
    <div class="pt-20">
      <div class="bg-gradient-to-r from-indigo-600 to-purple-600 text-white py-16">
        <div class="container mx-auto px-12">
          <div class="max-w-4xl text-center mx-auto">
            <h1 class="text-5xl font-bold mb-6">常见问题</h1>
            <p class="text-xl leading-relaxed">
              这里整理了用户最常遇到的问题和解答，希望能够帮助您快速解决疑问
            </p>
          </div>
        </div>
      </div>
    </div>

    <!-- FAQ内容 -->
    <div class="py-16 bg-white">
      <div class="container mx-auto px-12">
        <div class="max-w-4xl mx-auto">
          <!-- 搜索框 -->
          <div class="mb-12">
            <el-input
              v-model="searchText"
              placeholder="搜索问题..."
              size="large"
              class="max-w-md mx-auto"
              prefix-icon="Search"
            />
          </div>

          <!-- FAQ分类 -->
          <div class="flex justify-center mb-12">
            <div class="flex gap-4 flex-wrap">
              <button 
                v-for="category in categories"
                :key="category.key"
                :class="['px-6 py-2 rounded-full font-medium transition-colors',
                         selectedCategory === category.key 
                         ? 'bg-blue-600 text-white' 
                         : 'bg-gray-200 text-gray-700 hover:bg-gray-300']"
                @click="selectedCategory = category.key"
              >
                {{ category.name }}
              </button>
            </div>
          </div>

          <!-- FAQ列表 -->
          <div class="space-y-4">
            <div 
              v-for="faq in filteredFAQs" 
              :key="faq.id"
              class="bg-gray-50 rounded-lg overflow-hidden"
            >
              <button 
                class="w-full text-left p-6 hover:bg-gray-100 transition-colors flex justify-between items-center"
                @click="toggleFAQ(faq.id)"
              >
                <span class="text-lg font-medium text-gray-900">{{ faq.question }}</span>
                <span class="text-2xl text-gray-400">{{ faq.expanded ? '−' : '+' }}</span>
              </button>
              <div v-show="faq.expanded" class="px-6 pb-6">
                <div class="text-gray-600 leading-relaxed" v-html="faq.answer"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 联系客服 -->
    <div class="py-16 bg-gray-50">
      <div class="container mx-auto px-12">
        <div class="max-w-2xl mx-auto text-center">
          <h2 class="text-3xl font-bold mb-6 text-gray-900">没有找到答案？</h2>
          <p class="text-gray-600 mb-8">我们的客服团队随时为您提供帮助</p>
          <div class="flex gap-4 justify-center">
            <el-button type="primary" size="default" class="rounded px-6 font-medium" @click="contactSupport">
              联系客服
            </el-button>
            <el-button size="default" class="rounded px-6 font-medium" @click="submitFeedback">
              提交反馈
            </el-button>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'

const router = useRouter()

const searchText = ref('')
const selectedCategory = ref('all')

// FAQ分类
const categories = ref([
  { key: 'all', name: '全部' },
  { key: 'account', name: '账户相关' },
  { key: 'course', name: '课程学习' },
  { key: 'payment', name: '支付问题' },
  { key: 'technical', name: '技术支持' }
])

// FAQ数据
const faqs = ref([
  {
    id: 1,
    category: 'account',
    question: '如何注册账户？',
    answer: '点击页面右上角的"注册"按钮，填写手机号或邮箱，设置密码即可完成注册。注册成功后会自动登录。',
    expanded: false
  },
  {
    id: 2,
    category: 'account',
    question: '忘记密码怎么办？',
    answer: '在登录页面点击"忘记密码"，输入注册时的手机号或邮箱，系统会发送重置密码的链接或验证码。',
    expanded: false
  },
  {
    id: 3,
    category: 'course',
    question: '如何购买课程？',
    answer: '浏览课程页面，选择心仪的课程，点击"立即购买"按钮，选择支付方式完成付款即可开始学习。',
    expanded: false
  },
  {
    id: 4,
    category: 'course',
    question: '课程可以退款吗？',
    answer: '购买课程后7天内，如学习进度不超过20%，可申请无条件退款。超过期限的退款需要审核。',
    expanded: false
  },
  {
    id: 5,
    category: 'payment',
    question: '支持哪些支付方式？',
    answer: '我们支持微信支付、支付宝、银行卡支付等多种支付方式，确保您的支付安全便捷。',
    expanded: false
  },
  {
    id: 6,
    category: 'technical',
    question: '视频播放不了怎么办？',
    answer: '请检查网络连接，尝试刷新页面。如果问题仍然存在，可能是浏览器兼容性问题，建议使用Chrome或Firefox浏览器。',
    expanded: false
  },
  {
    id: 7,
    category: 'technical',
    question: '如何下载课程资料？',
    answer: '在课程学习页面，找到"课程资料"区域，点击相应文件的下载按钮即可下载到本地。',
    expanded: false
  },
  {
    id: 8,
    category: 'course',
    question: '课程有效期是多久？',
    answer: '大部分课程购买后永久有效，部分特殊课程可能有时间限制，具体请查看课程详情页面的说明。',
    expanded: false
  }
])

// 筛选FAQ
const filteredFAQs = computed(() => {
  let filtered = faqs.value

  // 分类筛选
  if (selectedCategory.value !== 'all') {
    filtered = filtered.filter(faq => faq.category === selectedCategory.value)
  }

  // 搜索筛选
  if (searchText.value.trim()) {
    const searchTerm = searchText.value.toLowerCase()
    filtered = filtered.filter(faq => 
      faq.question.toLowerCase().includes(searchTerm) ||
      faq.answer.toLowerCase().includes(searchTerm)
    )
  }

  return filtered
})

// 方法
const startLearning = () => {
  router.push('/study')
}

const toggleFAQ = (id) => {
  const faq = faqs.value.find(f => f.id === id)
  if (faq) {
    faq.expanded = !faq.expanded
  }
}

const contactSupport = () => {
  router.push('/contact')
}

const submitFeedback = () => {
  router.push('/feedback')
}
</script>

<style scoped>
</style>

